<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    参考资料：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showDirectoryPicker
    <br/>
    <button>打开文件夹</button>
    <script>
     const btn = document.querySelector('button');
     btn.onclick=async function(){
        try{
            const handler = await showDirectoryPicker();
            console.log(handler);
            const root = await processHandle(handler);
            const file = await root.children[2].getFile();
            const reader = new FileReader();
            reader.onload=(e)=>{
                console.log(e.target.result);
            }
            reader.readAsText(file,'utf-8');
           
        }catch(e){
            console.log(e);
            // 用户拒绝获取权限
            console.log("用户拒绝获取权限");
        }
        
     }
     async function processHandle(handle){
        if(handle.kind==='file'){
            return handle;
        }
        handle.children=[];
        const iter = await handle.entries();// 获取文件夹中的所有内容
        for await (const info of iter){
            console.log(info);
            const subHandle = await processHandle(info[1]); // 递归处理文件夹中的内容
            handle.children.push(subHandle);
        }
        return handle;
     }
    </script>
</body>
</html>